<template>
  <div class="q">
    <div class="e">全部商品></div>
    <div class="w">
      <div class="r">
        <div class="let1">
          <span class="name">分类:</span>
          <div>居家生活</div>
          <div>居家生活</div>
          <!-- <div>{{ $store.state.gouwuche.qwe }}</div> -->
          <!-- <button @click="ceshi(10)">测试</button> -->
        </div>
        <div class="let2">
          <span class="name">排序</span>
          <div>默认</div>
          <div>价格</div>
          <div class="srk">
            ￥<input type="text" @focus="jujiao" class="inp" v-model="qq" />
            <em>-</em>
            <input type="text" @focus="jujiao" class="inp" v-model="ww" />
          </div>
          <div v-if="isInputShow">
            <el-button @click="queding" :disabled="panduan">确定</el-button>
            <el-button @click="qingkong">清空</el-button>
            <!-- <a href="#">清空</a> -->
          </div>
        </div>
        <div class="let3">
          <div class="mokuai" v-for="(item, i) in list2" :key="i">
            <div class="top">
              <img :src="item.img" />
              <!-- <span>{{item.img}}</span> -->
            </div>
            <div class="button">
              <div class="prdtTags"></div>
              <div>{{ item.name }}</div>
              <div class="color">${{ item.price }}</div>
              <div>
                <el-button type="warning"
                  ><span style="color: white" @click="ceshi(item)">加入购物车</span></el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w" style="margin-top: 20px; margin-bottom: 0">
      <div><h2>猜你喜欢</h2></div>
      <div class="cnxh">
        <!-- 轮播图 -->
        <el-carousel :interval="4000" type="card" height="350px">
          <el-carousel-item v-for="item in list1" :key="item">
            <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
            <a href="#/"><img :src="item.img" alt="" /></a>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

  </div>
</template>

<script>
import { ref, computed, onMounted, inject } from "vue";
import axios from "axios";
import { useStore } from "vuex"; // 引入useStore 方法

 // store 实例对象

export default {
  setup(props) {
    const store = useStore(); // 该方法用于返回store 实例
    let list2 = ref([]);
    let list1 = ref([]);
    let qq = ref("");
    let ww = ref("");
    let isInputShow = ref(false);
    let panduan = ref(false);
    let list = ref([]);
    // 聚焦
    function jujiao() {
      isInputShow.value = true;
      console.log(list);
    }
    // 筛选的新数组
    const qqqq = computed(() => {
      return list1.value.filter(
        (item) => item.price > qq.value && item.price < ww.value
      );
    });

    // 确定按钮
    function queding() {
      if (qq.value == "" || ww.value == "") {
        return alert("请输入区间值");
      }
      list2.value = [];
      list2.value = qqqq.value;
      isInputShow.value = false;
    }
    // 清空按钮
    function qingkong() {
      jiekou();
      qq.value = "";
      ww.value = "";
      isInputShow.value = false;
    }
    //获取数据接口
    function jiekou() {
      axios.get("http://localhost:3000/data").then((res) => {
        list1.value = res.data;
        list2.value = res.data;
        // if (list.length > 0) {
        //   return list2.value = list;
        // }else{
        //   return list2.value = res.data;
        // }
      });
    }
    // 生命周期函数
    onMounted(() => {
      jiekou();
    });

const ceshi = (num) => {
  store.commit('gouwuche/sum', num)
}

    return {
      list2,
      list1,
      list,
      qq,
      ww,
      isInputShow,
      panduan,
      jujiao,
      qqqq,
      queding,
      qingkong,
      jiekou,
      ceshi,
    };
  },
};
</script>
<style lang="less" scoped>
.cnxh img {
  width: 100%;
  height: 350px;
}
span {
  color: #999;
}
.name {
  margin-right: 28px;
}
.color {
  color: red;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.q {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  // padding-top: 50px;
  .e {
    margin: 0 auto;
    width: 1100px;
    height: 50px;
    line-height: 50px;
  }
  .w {
    margin: 0 auto;
    width: 1100px;
    // height: 500px;
    box-sizing: border-box;
    // margin: 20px 30px;
    //内边距
    padding: 30px 40px;
    // padding: 0 0 0 0;
    background-color: #fff;
    .r {
      // margin: 1px 1px 1px 1px;
      // border: 1px solid red;
      // background-color: black;
    }
    .let1 {
      width: 100%;
      height: 50px;
      line-height: 50px;
      // background-color: pink;
      font-size: 14px;
      display: flex;
      border-bottom: 1px dashed #999;

      div {
        float: left;
        margin-right: 30px;
        margin-bottom: 16px;
        font-size: 14px;
      }
    }
    .let2 {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #999;
      display: flex;
      font-size: 14px;
      div {
        margin-right: 28px;
      }
      .inp {
        height: 20px;
        width: 40px;
      }
      .srk {
        // position: absolute;
        // display: inline-block;
      }
    }
    .let3 {
      display: flex;
      flex-wrap: wrap;
      margin: 25px auto 0;
      /* 两端对齐 */
      // justify-content: space-between;
      .mokuai {
        padding-left: 11px;
        width: 240px;

        .top {
          // margin: 0 auto;
          text-align: center;
        }
        .button {
          // background-color: rgb(87, 93, 93);
          width: 100%;
          height: 100px;
          text-align: center;
          .prdtTags {
            height: 20px;
            font-size: 0;
          }
        }
      }
    }
  }
}
</style>